<template>
	<div class="show">
		<ul class="goodList">
			<li v-for="goods in list">
				<img v-bind:src="goods.img">
				<p>{{goods.goodname}}</p>
			</li>
		</ul>
	</div>
</template>

<style type="text/css">
	.goodList img {
		width: 180px;
		height: 180px;
	}
	.goodList li {
		width: 200px;
		height: 200px;
		list-style: none;
		float: left;
		color: red;
		font-size: 13px;
		margin-bottom: 30px;
	}
</style>

<script type="text/javascript">
	export default{
		name:"show",
		data(){
	      var obj=this;
	      var url="";
	  		if(obj.goodId==1){
	  			url="json/bjb.json";
	  		}else if(obj.goodId==2){
	  			url="json/shouji.json";
	  		}else if(obj.goodId==3){
	  			url="json/fushi.json";
	  		}else{
	  			url="json/bjb.json";
	  		}
	      this.$http.get(url).then(function(res){
	      	obj.list=res.data;
	     })
	     return{
	     	list:[]
	     }	
	  },
	  props:{
	  	goodId:Number
	  },
	  watch:{
	  	goodId(){
	  		var obj=this;
	  		var url="";
	  		if(obj.goodId==1){
	  			url="json/bjb.json";
	  		}else if(obj.goodId==2){
	  			url="json/shouji.json";
	  		}else if(obj.goodId==3){
	  			url="json/fushi.json";
	  		}
	  		this.$http.get(url).then(function(res){
	      	    obj.list=res.data;
	        })
	        return{
	     	  list:[]
	       }
	  	}
	  }
    }
</script>